<template>
  <view class="bind_iphone">
    <view class="log_11">

    </view>
    <view class="inpt-box">
      <uni-easyinput v-model="phone" placeholder="请输入手机号" @change="phoneFn"></uni-easyinput>
    </view>
    <view class="inpt-box2">
      <uni-easyinput v-model="code" placeholder="请输入手机验证码"></uni-easyinput>
      <view class="phone-item">
        <!-- 发送验证码按钮 -->
        <view class="get-code" @click="getCodeFn" v-if="codeBtn.isCode || codeBtn.codeNumber == 0">
          {{codeBtn.codeName}}
        </view>
        <view class="get-code" v-else>{{codeBtn.codeNumber}}s</view>
      </view>
    </view>
    <view class="sureBtn" hover-class="sureBtn-hover" @click="loginPhone">
      确定
    </view>

    <view class="check-box">
      <checkbox-group @change="handleChange">
        <checkbox value="cb" :checked="isChecked" class="size" /> 我已阅读并同意<text style="margin-left:10rpx;"
          @click="gotoAgreement">《11对战平台用户协议》</text>
      </checkbox-group>
    </view>
    <view class="tips2">
      <image src="https://img.5211game.com/Base/xiaochengxu/static/new-tishi.png" mode="widthFix" lazy-load alt=""></image>
    </view>
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="绑定结果" :content="txt"
        @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
    <!-- 提示信息弹窗 -->
    <uni-popup ref="message" type="message">
      <uni-popup-message :type="msgType2" :message="messageText" :duration="2000"></uni-popup-message>
    </uni-popup>
  </view>
</template>

<script>
  import md5 from "js-md5"
  import {
    mapMutations,
    mapActions
  } from 'vuex'
  export default {
    data() {
      return {
        value: '',
        phone: '', // 手机号
        timer: null, // 定时器
        codeBtn: { // 按钮状态切换
          codeName: '获取验证码', // 状态名称
          codeNumber: 60, // 倒计时秒数
          isCode: true // 是否获取验证码
        },
        code: '',
        msgType: 'warn',
        txt: '绑定成功',
        msgType2: 'warn',
        messageText: '',
        signMd5: '',
        isChecked: false,
        ticket: '',
        signMd5_login: ''
      };
    },
    watch: {
      // 监听倒计时
      'codeBtn.codeNumber': {
        handler(val) {
          // 这里监听用户输入完完整的验证码，去调接口验证。
          if (val == 0) {
            this.codeBtn.codeName = '重新获取'
            this.codeBtn.isCode = true
            clearInterval(this.timer)
          }
        }
      }
    },
    methods: {
      ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateUserPic', 'updataIsPhone']),
      // 前段获取验证码倒计时
      getCode() {
        this.codeBtn.isCode = false
        this.codeBtn.codeNumber = 60
        this.timer = setInterval(() => {
          if (this.codeBtn.codeNumber == 0) {
            this.codeBtn.isCode = true
            clearInterval(this.timer)
            return
          }
          this.codeBtn.codeNumber--
        }, 1000)
      },
      gotoAgreement() {
        uni.navigateTo({
          url: '/subpkg/agreement_11/agreement_11'
        })
      },
      dialogToggle(type) {
        this.msgType = type
        this.$refs.alertDialog.open()
      },
      dialogConfirm() {
        console.log('点击确认')
      },
      dialogClose() {
        console.log('点击关闭')
      },
      phoneFn() {
        if (this.$Utils.isNull(this.phone)) {
          this.messageText = '请填写手机号 ';
          this.$refs.message.open()
          return false
        } else if (!this.$Utils.checkPhone(this.phone)) {
          this.messageText = '请填写正确手机号格式';
          this.$refs.message.open()
          return false
        }
      },
      //获取验证码接口
      getCodeFn() {
        if (this.$Utils.isNull(this.phone)) {
          this.messageText = '请填写手机号 ';
          this.$refs.message.open()
          return false
        } else if (!this.$Utils.checkPhone(this.phone)) {
          this.messageText = '请填写正确手机号格式';
          this.$refs.message.open()
          return false
        } else {
          this.signMd5 =
            `Bid=65&Code=${1}&Mobile=${this.phone}&key=C63A39419CE64F258ADFE3FAF5E63477`;
          console.log(this.signMd5)
          this.signMd5 = md5(this.signMd5);
          const query = {
            Mobile: this.phone,
            Code: 1,
            Sign: this.signMd5,
            Bid: 65
          }
          uni.request({
            url: `https://passport.9211.com/WebApi/Wap/Action?t=sendsmsloginmsg&data=${JSON.stringify(query)}&pt=wxmini`,
            header: {
              'Content-Type': 'application/json' //自定义请求头信息
            },
            method: 'GET', //请求方式，必须为大写
            success: (res) => {
              console.log(res)
              const {
                data
              } = res
              if (data.code == 0) {
                this.getCode();
                this.ticket = data.data.ticket;
              } else {
                if(data.code == -10004 ){
                  this.messageText = '您还未绑定11平台账号！请选择其他登录方式';
                  this.$refs.message.open()
                }else{
                  this.messageText = data.msg;
                  this.$refs.message.open()
                }
              
              }

            }
          })
        }
      },
      handleChange(e) {
        this.isChecked = !this.isChecked;
        console.log(this.isChecked)
      },
      loginPhone() {
        if (this.$Utils.isNull(this.phone)) {
          this.messageText = '请填写手机号 ';
          this.$refs.message.open()
          return false
        } else if (!this.$Utils.checkPhone(this.phone)) {
          this.messageText = '请填写正确手机号格式';
          this.$refs.message.open()
          return false
        } else if (this.$Utils.isNull(this.code)) {
          this.messageText = '请输入手机验证码';
          this.$refs.message.open()
          return false
        } else if (!this.isChecked) {
          this.messageText = '请阅读并同意勾选!';
          this.$refs.message.open()
          return false
        } else {
          this.signMd5_login =
            `Bid=65&Mobile=${this.phone}&Ticket=${this.ticket}&ValiCode=${this.code}&key=C63A39419CE64F258ADFE3FAF5E63477`;
          console.log(this.signMd5_login)
          this.signMd5_login = md5(this.signMd5_login);
          const query = {
            Mobile: this.phone,
            Ticket: this.ticket,
            ValiCode: this.code,
            Sign: this.signMd5_login,
            Bid: 65
          }
          uni.request({
            url: `https://passport.9211.com/WebApi/Wap/Action?t=checksmsloginmsg&data=${JSON.stringify(query)}&pt=wxmini`,
            header: {
              'Content-Type': 'application/json' //自定义请求头信息
            },
            method: 'GET', //请求方式，必须为大写
            success: (res) => {
              console.log('手机登录成功', res)
              const {
                data
              } = res
              if (data.code == 0) {
                this.updateToken(data.data.st);
                const userInfo = {
                  userId: data.data.userId,
                  userName: data.data.userName,
                  nickName: '',
                  avatarUrl: '',
                  isphone: true
                }
                this.updataIsPhone(true)
                this.updateUserInfo(userInfo);
                this.getUserPic(data.data.userId);
                uni.switchTab({
                  url: '/pages/my/my'
                })
              } else {
                this.messageText = data.msg;
                this.$refs.message.open()
              }

            }
          })
        }
      },
      getUserPic(uid) {
        const signMd5 = md5(
          `Bid=66&UserId=${uid}&key=7863BD2768C14099BA0AC5070B469C76`);
        uni.request({
            url: `https://api.5211game.com/YYAvatar/Wap/Action?t=queryuseravatar&data=${JSON.stringify({Bid:66,UserId:uid,Sign:signMd5})}`,
            header: {
              'Content-Type': 'application/json' //自定义请求头信息
            },
            method: 'GET',
            success: (reg) => {
              console.log('头像', reg)
              this.updateUserPic(reg.data.data.PATH);
            },
            fail: (err) => {
              this.updateUserPic(
                'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
              )
            },
          }

        )

      }

    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;

    .bind_iphone {
      .log_11 {
        width: 308rpx;
        height: 116rpx;
        margin: 0 auto;
        background: url('https://img.5211game.com/Base/xiaochengxu/static/logo_11.png');
        background-size: cover;
        margin-bottom: 52rpx;
        margin-top: 45rpx;
      }

      .inpt-box {
        width: 690rpx;
        height: 96rpx;
        margin: 0 auto;
        margin-top: 75rpx;
        margin-bottom: 30rpx;

        .uni-easyinput__content-input {
          width: 690rpx;
          height: 96rpx;
        }
      }

      .inpt-box2 {
        width: 690rpx;
        height: 96rpx;
        border: 1px solid #F0F0F0;
        border-radius: 4px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-bottom: 32rpx;

        .uni-easyinput__content-input {
          width: 403rpx;
          height: 96rpx;
        }

        .is-input-border {
          border: none;
        }

        .phone-item {
          width: 175rpx;
          height: 96rpx;
          line-height: 96rpx;
          text-align: center;
          position: relative;
          font-family: MicrosoftYaHei;
          font-size: 24rpx;
          color: #999;

          ::after {
            content: "";
            width: 2rpx;
            height: 57rpx;
            background-color: #ccc;
            position: absolute;
            left: 0px;
            top: 50%;
            transform: translateY(-50%);

          }
        }
      }

      .sureBtn {
        width: 690rpx;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        margin: 0 auto;
        background: linear-gradient(90deg, #F75803 0%, #FFA000 100%);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        font-family: MicrosoftYaHei;
        font-size: 28rpx;
        color: #FFFFFF;
        margin-bottom: 50rpx;
      }

      .sureBtn-hover {
        background: linear-gradient(90deg, #f87b38 0%, #fdb134 100%);
      }

      .check-box {
        width: 690rpx;
        margin: 0 auto;
        font-family: MicrosoftYaHei;
        font-size: 22rpx;
        color: #333333;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .size {
          transform: scale(0.8, 0.8);
        }

        text {
          color: rgba(171, 2, 12, 1);
        }
      }

      .tips2 {
        width: 707rpx;
        margin: 0 auto;
        margin-top: 80rpx;
        image {
          width: 100%;
          height: auto;
        }
      }
    }

  }
</style>